<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{ message }}</h1>
    <h1>{{ news }}</h1>
    <button @click="changeMess">改变message</button>
</div>
<script src="../js/vue.js"></script>
<script>
    /*
    *data属性：
    *   data属性需要传递一个函数，并且该函数返回一个对象
    *       1.在Vue2的时候可以传入一个对象(组件里面data必须是函数)
    *       2.在Vue3的时候必须传入一个函数并且返回一个对象否则会报错
    *
    *data中返回的对象会被Vue的响应式系统劫住，之后对该对象的修改或者访问都会被劫住处理
    *       1.所以当我们在template或者app中通过{{}}访问data中的属性时，可以从对象中获取数据
    *       2.当修改data中的属性的时候，模板中用到data中属性时模板会重新更新
    *
    *data函数：
    *       1.该函数应当返回一个普通 JavaScript 对象，Vue 会将它转换为响应式对象。实例创建后，可以通过 this.$data 访问该响应式对象。
    *       2.组件实例也代理了该数据对象上所有的属性，因此 this.a 等价于 this.$data.a。
    *       3.所有会用到的顶层数据属性都应该提前在这个对象中声明。
    *       4.虽然理论上可以向 this.$data 添加新属性，但并不推荐这么做。
    *       5.如果一个属性的值在一开始还获取不到，应当先用 undefined 或是 null 值来占位，让 Vue 知道这个属性是存在的。
    *       6.以 _ 或 $ 开头的属性将不会被组件实例代理，因为它们可能和 Vue 的内置属性、API 方法冲突。你必须以 this.$data._property 的方式访问它们。
    *       7.不推荐返回一个可能改变自身状态的对象，如浏览器 API 原生对象或是带原型的类实例等。理想情况下，返回的对象应是一个纯粹代表组件状态的普通对象
    * */
    const app = Vue.createApp({
        data() {
            return {
                message: "helloVue3",
                news: "helloVue2"
            }
        },
        methods: {
            changeMess() {
                this.message = 'HELLOVUE'
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>
